<template>
    <div class="addrule">
        <commonformdialog :dialogWidth="'30%'" @confirmbtn='confirmbtn' :isshowDialogs='isshowDailog' :dialogTitle='dialogtitle' :topHeight='"20vh"' @closetextDialog='closetextDialog'>
            <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
  <el-row>
    <el-row>

      <el-form-item label="规则名称" prop="title">
        <el-input v-model="formData.title" placeholder="请输入规则名称" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="规则类型" prop="type" >
        <el-select v-model="formData.type" placeholder="请选择规则类型" clearable :style="{width: '100%'}" @change='changetype'>
          <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
            :disabled="item.disabled" ></el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item :label="detailtitle" prop="detail" v-if="ishowdetail">
        <el-input v-model="formData.detail" placeholder="请输入规则详情" clearable :style="{width: '100%'}" @input="detailinput">
          <template slot="append">{{appenddetail}}</template>
        </el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="结算规则" prop="rule">
        <el-radio-group v-model="formData.rule" size="medium" class="ruleradio" @change='radiogropu'>
          <el-radio label="1" >即时结算</el-radio>
          <el-radio label="2" >学员付清结算</el-radio>
          <el-radio label="3"  ><div class="radioinput"><span>学员交费达</span><el-input :disabled="isdisableradio" @input='proportioninput' v-model="proportion" style="width:95px;"><template slot="append">%</template></el-input><span>结算</span></div> </el-radio>
          <el-radio label="4" ><div class="radioinput"><span>学员交费达</span><el-input :disabled='isdisableradiomoney' @input="moneyinput" v-model="money" style="width:95px;"><template slot="append">元</template></el-input><span>结算</span></div></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="规则状态" prop="status">
        <el-radio-group v-model="formData.status" size="medium">
          <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
            :disabled="item.disabled">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-row>
  </el-row>
</el-form>

        </commonformdialog>
    </div>
</template>

<script>
import commonformdialog from '@/components/commondialog/commondialog'
import warning from '@/components/warning/warning'
//api
import {addrule,getDetail,updatarule} from '@/api/rule'
export default {
    data(){
        return {
          //是否禁用单选输入框
          isdisableradio:true,
          //是否禁用金额输入框
          isdisableradiomoney:true,
          //学员金额
          money:'',
          //学员占比
          proportion:'',
          //规则类型
          type:'',
          //用户的id
          ids:'',
          //规则详情标题
          detailtitle:'',
          //后缀显示符号
          appenddetail:'',
          //是否显示规则详情
          ishowdetail:false,
          //表单信息
          formData: {
        title: '',
        type: '',
        detail: '',
        rule: '',
        status: '',
        rule_detail:''
      },
      rules: {
        title: [{
          required: true,
          message: '请输入规则名称',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择规则类型',
          trigger: 'change'
        }],
        detail: [{
          required: true,
          message: '请输入规则详情',
          trigger: 'blur'
        }],
        rule: [{
          required: true,
          message: '请选择结算规则',
          trigger: 'change'
        }],
        status: [{
          required: true,
          message: '规则状态不能为空',
          trigger: 'change'
        }],
      },
      typeOptions: [{
        "label": "费用占比",
        "value": 1
      }, {
        "label": "学员定额",
        "value": 2
      }],
      // 规则状态
      statusOptions: [{
        "label": "启用",
        "value": 1
      }, {
        "label": "禁用",
        "value": 2
      }],
        }
    },
    methods:{
      //判断输入的数字是否大于100 或者 小于0

      proportioninput(val){
        if(val>100||val<=0){
          this.$message.info('输入的数字有误请重新输入！')
          this.proportion = ''
        }else{
         this.formData.rule_detail = this.proportion
        }
      },
      moneyinput(val){
          this.formData.rule_detail = this.money
      },
      radiogropu(val){
       if(val==1||val==2){
         this.money = ''
         this.proportion = ''
         this.isdisableradio = true
           this.isdisableradiomoney = true
       }else{
         if(val=='3'){
           this.money = ''
           this.isdisableradio = false
           this.isdisableradiomoney = true

         }else if(val=='4'){
           this.proportion = ''
           this.isdisableradio = true
           this.isdisableradiomoney = false
           this.formData.rule_detail = this.money
         }
       }
      },
      detailinput(val){
         console.log(val)
         if(this.type==1){
           if(val<=0||val>100){
             this.$message.info('输入的数字有误请重新输入!')
             this.formData.detail = ''
             return
           }
         }else{
           if(val<=0){
             this.$message.info('输入的数字有误请重新输入!')
             this.formData.detail = ''
             return
           }
         }
         
       

      },
      changeLangEvent(val){
        let result = this.ruleOptions[val-1]
          if(val==3||val==4){
            this.$prompt('', '请输入', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder:result.label,
          inputPattern: /^[0-9]*$/,
          inputErrorMessage: '请输入数字'
        }).then(({ value }) => {
          if(val==3){
            this.ruleOptions[val-1].label ='学员交费达'+value+'%结算'
          }else{
            this.ruleOptions[val-1].label = '学员交费达'+value+'元结算'
          }
          this.formData.rule_detail = value
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
          this.formData.rule = ''
          this.formData.rule_detail = ''
        });
          }
      },
        //确认弹窗
        confirmbtn(){
            this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        let {
        title,
        type,
        detail,
        rule,
        status,
        rule_detail} = this.formData
        if(this.formType==0){
          let data = await addrule(this.formData)
           if(data.code=='0000'){
          this.$message.success('新增规则成功！')

        }
        }else{
          let params = {
            type,
        detail,
        rule,
        status,
        rule_detail,
        title
          }
          params.id = this.ids
          let data = await updatarule(params)
           if(data.code=='0000'){
          this.$message.success('编辑规则成功！')

        }
        }
        this.$emit('confirm')
          //清空表单信息
         this.$refs['elForm'].resetFields()
         //清空用户输入的值
         this.money = ''
         this.proportion = ''
         //把input 都设置为禁用
         this.isdisableradio = true
         this.isdisableradiomoney = true
      })

        },
        //取消关闭弹窗
        closetextDialog(){
            this.$emit('close')
            this.$refs['elForm'].resetFields()
           //清空用户输入的值
         this.money = ''
         this.proportion = ''
         //把input 都设置为禁用
         this.isdisableradio = true
         this.isdisableradiomoney = true
        },
        //切换规则类型选项
        changetype(val){

          if(!val){
            this.ishowdetail = false
            return
          }
          if(val==1){
            this.type = val
            this.appenddetail = '%'
            this.ishowdetail = true
            this.detailtitle = '设置比例'

          }else{
            this.type = val
            this.appenddetail = '元'
            this.ishowdetail = true
            this.detailtitle = '设置金额'
          }
        },

    },
    props:{
        //是否显示弹窗
        isshowDailog:{
            type:Boolean,
            default:false
        },
        //是编辑还是新增
    formType:{
      type:Number,
      default:0
    },
    //弹窗标题
    dialogtitle:{
      type:String,
      default:''
    }
    },
    components:{
        commonformdialog
    },
    mounted(){
      this.$bus.on("editform",async (val)=>{
        this.ishowdetail = true
        //获取要编辑的id
        let id = val.id
        let data = await getDetail({id:id})
        this.formData.type  = data.data.type.value
        this.formData.detail = data.data.detail.value
        this.formData.title = data.data.title
        this.formData.rule = data.data.rule.value+''
      if(data.data.type.value==1){
        this.detailtitle = '规则比例'
        this.appenddetail = '%'
      }else{
        this.appenddetail = '元'
        this.detailtitle = '规则金额'
      }
      if(data.data.rule.value+''=='3'){
         this.money = ''
           this.isdisableradio = false
           this.isdisableradiomoney = true
           this.proportion = data.data.rule_detail
      }else if(data.data.rule.value+''=='4'){
           this.proportion = ''
           this.isdisableradio = true
           this.isdisableradiomoney = false
           this.money = data.data.rule_detail
      }else{
        this.isdisableradio = true
           this.isdisableradiomoney = true
           this.proportion = ''
           this.money = ''
      }
      this.formData.status = data.data.status
      this.formData.rule_detail = data.data.rule_detail
      this.ids = data.data.id

    });
    },
     destroyed(){
    this.$bus.off("editform")
  }
}
</script>

<style scoped lang='scss'>
::v-deep{
  .el-input-group__append{
    padding: 0 10px;
  }
  .ruleradio{
    .el-radio{
      display: block;
      display: flex;
      align-items: center;
      margin: 20px 0;
      .el-input{
        margin: 0 5px;
      }
      .el-input__inner{
        padding: 0 5px;
      }
      &:last-child{
        margin-bottom: 0;
      }
      &:first-child{
        margin-top:8px;
      }
    }
  }
}
.radioinput{
  display: flex;
  align-items: center;
}
</style>
